0x00

每次访问stackoverflow都有一点很烦，就是我如果想看一个回答发布的具体时间，只能把鼠标移到时间上等待两秒出现悬浮窗来显示。由于技术发展太快，所以有些五年前解决这个问题的相关API到了当前很可能已经不适用了或者已有了更好的解决办法，所以stackoverflow上我也会尽量看时间最近的讨论，显示完整的回答/评论发布时间对我来说就会方便很多。
为了解决这个痛点，我一直打算自己搞一个chrome的小扩展来修改页面的DOM，刚好今天手头活干完了，看了一下chrome扩展开发的文档，发现比想象中要简单很多，于是自己试了一下，完成了这个小扩展。

0x01

chrome的扩展核心文件是一个json，给浏览器提供一些关于扩展样式和行为的信息（主要是引用资源文件和脚本文件），还有必备属性如扩展名称和版本号。这个json文件叫做manifest.json，关于它的字段名可以参考官方文档。这里不再赘述。
我的扩展需要在stackoverflow.com/question/*页面上自动执行修改DOM的操作，并且在document加载结束后执行，所以json文件这么写

1
2
3
4
5
6
7
8
9
10
11
{
   "content_scripts": [ {
      "js": [ "script.js" ],
      "matches": [ "http://stackoverflow.com/questions/*" ],
      "run_at": "document_end"
   } ],
   "description": "This extension can display full date in reply and comment of stackoverflow.com",
   "manifest_version": 2,
   "name": "Stackoverflow Full Date",
   "version": "0.1"
}

0x02

接下来用chrome的开发者工具找到stackoverflow页面中显示时间的位置，找到对应的标签，answer的时间标签的class是relativetime，comment的时间标签的class是relativetime-clean，完整的时间在标签的title属性里。

0x03

接下来编写script.js脚本文件。这个脚本需要把上一步提到的那些元素找到，替换标签中间的文本内容为标签的title属性值。
脚本一定得在页面DOM元素加载完才能执行，否则是无法找到对应的标签的，所以最理想的位置是document.domContentLoaded发生时。
完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
function showFullDate() {
    var arr = document.getElementsByClassName("relativetime");
    for (var i = 0; i < arr.length; i++) {
        arr[i].childNodes[0].nodeValue = arr[i].getAttribute("title");
    }
    var arr2 = document.getElementsByClassName("relativetime-clean");
    for (var i = 0; i < arr2.length; i++) {
        arr2[i].childNodes[0].nodeValue = arr2[i].getAttribute("title");
    }
}
document.domContentLoaded = showFullDate();

两个文件，11行JavaScript代码，就实现了这个功能。

0x04

其实你的chrome里的所有扩展，你都可以得到源码，方法如下：

  1. 在chrome地址栏输入chrome://extensions进入扩展程序管理页。
  2. 勾选中“开发者模式”，此时得到了所有扩展的ID。
  3. 在chrome地址栏输入chrome-extension://<extensionID>/manifest.json。

因为在地址栏输入chrome-extension://<extensionID>/<pathToFile>就可以得到扩展程序中的对应文件，而每一个扩展程序必定包含manifest.json文件，扩展程序的所有html、css、js以及各种图片资源文件都需要在这个json文件中引用，所以可以通过这种方式获取到扩展程序的源码以及静态资源。